<template>
  <div id="cart" v-if="userInfo.token">
    <div class="titleWrapper">
      <span class="text">购物车</span>
      <button class="clearCart" @click="clearCart">清空购物车</button>
    </div>
    <div class="content">
      <div class="contentWrapper">
        <section>
          <div class="contentItem" v-for="goods in shopCart" :key="goods.id">
            <div class="left">
              <a
                href="javascript:;"
                class="cartCheckBox"
                :checked="goods.checked"
                @click.stop="singerGoodsSelected(goods.id)"
              ></a>
            </div>
            <div class="center">
              <img :src="goods.small_image" />
            </div>
            <div class="right">
              <div class="rightText">{{ goods.name }}</div>

              <div class="bottom">
                <div class="price">{{ goods.price | moneyFormat}}</div>
                <div class="num btn-group">
                  <button
                    type="button"
                    class="btn btn-default"
                    @click="removeOutCart(goods.id, goods.num)"
                  >-</button>
                  <button type="button" class="btn btn-default">
                    <span class="inputNum">{{ goods.num }}</span>
                  </button>
                  <button type="button" class="btn btn-default" @click="addToCart(goods.id)">+</button>
                </div>
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>
    <div class="cartSubmit">
      <div class="cartSubmitCheckBox">
        <a
          href="javascript:;"
          class="submitCheckBox"
          :checked="isSelectedAll"
          @click.stop="selectedAll(isSelectedAll)"
        ></a>
        <span>全选</span>
      </div>

      <div class="total">
        合计:
        <div class="price">{{totalPrice | moneyFormat}}</div>
      </div>
      <router-link :to="{path:'/confirmOrder'}" class="submitOrder">去结算({{goodsCount}})</router-link>
    </div>
  </div>
  <SelectLogin v-else />
</template>

<script>
import { mapState, mapMutations } from "vuex";
import { Dialog } from "vant";
import SelectLogin from './../login/SelectLogin'

export default {
  name: "cart",
  computed: {
    ...mapState(["shopCart","userInfo"]),
    // 0. 选中商品的总数
    goodsCount() {
      let selectedGoodsCount = 0;
      Object.values(this.shopCart).forEach((goods, index) => {
        if (goods.checked) {
          selectedGoodsCount += 1;
        }
      });
      return selectedGoodsCount;
    },
    //1.商品是否全选
    isSelectedAll() {
      let goodsCount = Object.values(this.shopCart).length;
      let tag = goodsCount > 0;
      Object.values(this.shopCart).forEach((goods, index) => {
        if (!goods.checked) {
          tag = false;
        }
      });
      return tag;
    },
    // 2. 商品总价
    totalPrice() {
      let totalPrice = 0;
      Object.values(this.shopCart).forEach((goods, index) => {
        if (goods.checked) {
          totalPrice += goods.price * goods.num;
        }
      });
      return totalPrice;
    }
  },

  methods: {
    ...mapMutations([
      "REDUCE_CART",
      "ADD_GOODS",
      "SELECTED_SINGER_GOODS",
      "SELECTED_ALL_GOODS",
      "CLEAR_CART"
    ]),
    // 1.移除购物车
    removeOutCart(goodsId, goodsNum) {
      // console.log(goodsId,goodsNum);

      if (goodsNum > 1) {
        this.REDUCE_CART({ goodsId });
      } else if (goodsNum === 1) {
        //挽留提示(蒙版)
        Dialog.confirm({
          title: "温馨提示",
          message: "确定删掉商品吗?"
        })
          .then(() => {
            //点确定
            this.REDUCE_CART({ goodsId });
          })
          .catch(() => {
            // 点取消
            // do nothing
          });
      }
    },
    //2.增加商品数量
    addToCart(goodsId) {
      this.ADD_GOODS({ goodsId });
    },
    //3.单个商品选择与否
    singerGoodsSelected(goodsId) {
      this.SELECTED_SINGER_GOODS({ goodsId });
    },
    //4. 全选和取消全选
    selectedAll(isSelected) {
      this.SELECTED_ALL_GOODS({ isSelected });
    },

    //5. 清空购物车
    clearCart() {
      Dialog.confirm({
        title: "温馨提示!",
        message: "确定是否清空所有商品?"
      }).then(() => {
        this.CLEAR_CART();
      }).catch(()=>{
        // do nothing
      });
    }
  },
  components:{
    SelectLogin
  }
};
</script>


<style lang='less' scoped>
#cart {
  width: 100%;
  height: 100%;
  background-color: #f8f8f8;

  .titleWrapper {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 4rem;
    text-align: center;
    background-color: #f8f8f8;
    z-index: 1;

    .text {
      font-size: 2rem;
      line-height: 4rem;
      font-weight: bolder;
    }
    .clearCart {
      position: absolute;
      top: 1.6rem;
      right: 1rem;
      color: rgb(241, 41, 41);
      background-color: transparent;
    }
  }

  .content {
    padding: 0 1rem;
    background-color: #f8f8f8;

    .contentWrapper {
      width: 100%;
      position: relative;
      top: 5rem;
      background-color: transparent;
      margin-bottom: 9rem;

      .contentItem {
        width: 100%;
        // height: 16rem;
        padding: 1rem;
        display: flex;
        margin: 1rem 0;
        border-radius: 1rem;
        background-color: #fff;

        .left {
          margin-top: 6rem;
          flex: 1;
          text-align: center;

          .cartCheckBox {
            display: inline-block;
            background: url("./images/shop-icon.png") no-repeat;
            background-size: 4rem 8rem;
            width: 2rem;
            height: 2rem;
          }

          .cartCheckBox[checked] {
            background-position: -2rem 0;
          }
        }

        .center {
          flex: 4;
          margin-right: 1rem;

          img {
            width: 100%;
            margin-top: 2.2rem;
          }
        }
      }
      .right {
        flex: 7;
        position: relative;

        .rightText {
          width: 15rem;
          height: 4rem;
          line-height: 2rem;
          // text-align: center;
          margin-top: 1rem;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: pre-wrap;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }

        .bottom {
          display: flex;
          justify-content: space-between;
          position: relative;
          bottom: -2.5rem;
          // right: .5rem;

          .price {
            color: red;
          }

          // .num{
          //   font-size: 1rem;
          // }

          .inputNum {
            display: inline-block;
            padding: 0;
            width: 1rem;
            text-align: center;
            // background-color: #999;
          }
        }
      }
    }
  }

  .cartSubmit {
    width: 100%;
    height: 4rem;
    position: fixed;
    bottom: 4.2rem;
    line-height: 4rem;
    background-color: #f8f8f8;
    display: flex;
    border-radius: 1rem;

    .cartSubmitCheckBox {
      display: flex;

      .submitCheckBox {
        display: inline-block;
        position: absolute;
        top: 1.4rem;
        left: 1rem;
        // margin-right: 1rem;
      }

      span {
        margin-left: 3rem;
      }
    }

    .total {
      display: flex;
      margin-left: 1rem;
      color: red;
    }

    .submitOrder {
      position: absolute;
      right: 1rem;
      top: 0.5rem;
      font-size: 1.6rem;
      line-height: 2rem;
      padding: 0.5rem 1rem;
      background-color: red;
      border-radius: 2rem;
      color: #fff;
    }

    .submitCheckBox {
      display: inline-block;
      background: url("./images/shop-icon.png") no-repeat;
      background-size: 4rem 8rem;
      width: 2rem;
      height: 2rem;
    }

    .submitCheckBox[checked] {
      background-position: -2rem 0;
    }
  }
}
</style>